<template>
  <div>
    <header_slot></header_slot>
    <select_slot></select_slot>
    <!-- <div class="nav-back">
      <div class="nav">
        <div v-for="(rows,index) in navs" :key="index">
          <h4>{{rows.Name}}</h4>
          <div class="navs" v-for="(row,indexs) in rows.children" :key="indexs">
            <i :class="index==0 && indexs==0? 'red':''">{{row.name}}</i>
          </div>
        </div>
      </div>
    </div>-->

    <div class="wrap">
      <div class="tt">
        <h4>我的订单</h4>
      </div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部订单" name="first">
            <el-table :data="arrs" style="width: 100%">
              <el-table-column
                prop="createTime"
                label="订单日期"
                width="100"
              ></el-table-column>
              <el-table-column prop="goodsImage" label>
                <template slot-scope="scope">
                  <img :src="scope.row.goodsImage" alt />
                </template>
              </el-table-column>
              <el-table-column
                prop="goodsName"
                label="订单详情"
                width="300"
              ></el-table-column>
              <el-table-column prop="number" label="数量"></el-table-column>
              <el-table-column
                prop="totalPrice"
                label="金额(元)"
              ></el-table-column>
              <el-table-column prop="payment" label="状态">
                <template slot-scope="scope">{{
                  scope.row.payment == 0 ? "未付款" : "已付款"
                }}</template>
              </el-table-column>
              <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                  <!-- <el-button
                    v-if="scope.row.payment == 0"
                    size="small"
                    round
                    @click="clic()"
                    >立即购买</el-button
                  > -->
                  <el-button
                    size="small"
                    round
                    v-if="scope.row.payment == 0"
                    @click="pay(scope.row.id, scope.$index)"
                    >立即购买</el-button
                  >

                  <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"
                  >
                    <span>是否支付？</span>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="handleClose">取 消</el-button>
                      <el-button type="primary" @click="payer()"
                        >支付</el-button
                      >
                    </span>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="待付款" name="second">
            <el-table :data="arrss" style="width: 100%">
              <el-table-column
                prop="createTime"
                label="订单日期"
                width="100"
              ></el-table-column>
              <el-table-column prop="goodsImage" label>
                <template slot-scope="scope">
                  <img :src="scope.row.goodsImage" alt />
                </template>
              </el-table-column>
              <el-table-column
                prop="goodsName"
                label="订单详情"
                width="500"
              ></el-table-column>
              <el-table-column prop="number" label="数量"></el-table-column>
              <el-table-column
                prop="totalPrice"
                label="金额(元)"
              ></el-table-column>
              <el-table-column prop="payment" label="状态">
                <template slot-scope="scope">{{
                  scope.row.payment == 0 ? "未付款" : "已付款"
                }}</template>
              </el-table-column>
              <el-table-column prop="operate" label="操作">
                <!-- <el-button size="small" round @click="clic()"
                  >立即购买</el-button
                > -->
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <footer_slot></footer_slot>
  </div>
</template>
<script>
import header_slot from "./header-slot";
import select_slot from "./select-slot";
import footer_slot from "./footer-slot";
export default {
  components: {
    header_slot,
    select_slot,
    footer_slot,
  },
  name: "dingdan",
  data() {
    return {
      state: "已完成",
      Arr: [],
      activeName: "first",
      arrs: [],
      arrss: [],
      ids: [],
      totalPrices: [],
      Arrss: [],
      dialogVisible: false,
      Id: "",
      indexs: "",
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认取消支付？")
        .then((_) => {
          this.dialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
    pay(id, idx) {
      this.Id = id;
      this.indexs = idx;
      this.dialogVisible = true;
    },
    payer() {
      this.$axios
        .post("/order/updateOrderPayment", {
          id: this.Id,
        })
        .then((res) => {
          if (res.data.data == 1) {
            this.Arr[this.indexs].payment = 1;
            this.dealData()
          }
        });
      this.dialogVisible = false;
    },
    handleClick(val) {
      if (val.index == 1) {
        this.arrss = [];
        for (let i = 0; i < this.arrs.length; i++) {
          if (this.arrs[i].payment == 0) {
            this.arrss.push(this.arrs[i]);
          }
        }
      }
    },
    async findOrdersByUserId() {
      await this.$axios
        .post("/order/findOrdersByUserId", {
          userId: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          let datass = res.data.data;
          for (let i = 0; i < datass.length; i++) {
            let Arrs = {
              createTime: datass[i].createTime,
              payment: datass[i].payment,
              ids: `${datass[i].shoppingId}`,
              number: datass[i].number,
              totalPrice: datass[i].totalPrice,
              id: datass[i].id,
            };
            this.Arr.push(Arrs);
          }
        });
    },
    findDataById(id) {
      this.$axios
        .post("/shopping/findDataById", {
          id: id,
        })
        .then((res) => {
          let datas = res.data.data;
          var obj = {};
          obj.goodsImage = datas[0].goodsImage;
          obj.goodsName = datas[0].goodsName;
          this.Arrss.push(obj);
        });
    },
    dealData() {
      var time = setInterval(() => {
        if (this.Arrss.length > 0 && this.Arr.length > 0) {
          clearInterval(time);
          this.arrs= [];
          for (let i = 0; i < this.Arrss.length; i++) {
            var obj = Object.assign(this.Arrss[i], this.Arr[i]);
            this.arrs.push(obj);
          }
        }
      }, 100);
    },
  },
  mounted() {
    this.findOrdersByUserId();
    var time = setInterval(() => {
      if (this.Arr.length != 0) {
        for (let i = 0; i < this.Arr.length; i++) {
          this.findDataById(this.Arr[i].ids);
        }
        this.dealData();
        clearInterval(time);
      }
    }, 100);
  },
};
</script>
<style scoped>
img {
  height: 100px;
  width: 100px;
}
.nav-back {
  /* background-color: #f5f5f5; */
  overflow: hidden;
  float: left;
}
.nav {
  margin-left: 30px;
}
.nav h4 {
  margin-bottom: 15px;
  margin-top: 40px;
}
.bodys {
  height: 870px;
  background-color: #f5f5f5;
  overflow: hidden;
}
.tt {
  background-color: #f5f5f5;
  margin-top: 40px;
  padding: 10px 20px 20px;
  margin-bottom: 20px;
}
.tt h4 {
  margin-top: 10px;
}
.bg-purple {
  background-color: #f5f5f5;
}
.el-main {
  background-color: #f5f5f5;
}
i {
  font-style: normal;
}
i:hover {
  cursor: pointer;
  color: #e2231a;
}
.red {
  color: #e2231a;
}
</style>